<template>
  <div>
    <div class="drag_down_canvas"
         ref="test" draggable="true" @touchstart="dragstart($event)" @touchmove="draging($event)" @touchend="dragend($event)">
      <div class="top"
           :class="[isDragging?'dragging':'origin']"
           :style="{marginTop:marginHeight+'px'}">
        <div v-show="isRefresh">
          <slot name="indicator"></slot>
        </div>
      </div>
      <slot class="content" name="content">

      </slot>
    </div>
  </div>
</template>

<style scoped>
  .drag_down_canvas{
    height: 100%;
    width: 100%;
    overflow: auto;
    -webkit-user-drag: none;
    /*pointer-events: none;*/
  }
  .top{
    text-align: center;
    height: 60px;
  }
  .top.origin{
    transition: 0.3s;
  }
  .top.dragging{
  }
  .content{
    height: 100%;
  }
</style>

<script>
  let startX,startY;

  export default{
      props:{
        height:{
            type:Number,
            default:60
        }
      },
      data(){
          return {
            isRefresh: false,
            marginHeight: -60,
            isDragging: true
          }
      },
      methods:{
        dragstart: function(event){
          this.isDragging = true;
          startX = event.changedTouches[0].screenX;
          startY = event.changedTouches[0].screenY;
        },
        draging: function(event){
          let draggingY =  event.changedTouches[0].screenY;
          if(draggingY-startY<0||this.$refs.test.scrollTop>0){
            this.marginHeight=-60;
          }
          else if(draggingY-startY<60){
            this.marginHeight=draggingY-startY-60;
          }else {
            this.marginHeight=0;
          }
        },
        dragend: function(event){
          this.isDragging= false;
          if(this.marginHeight==0){
          	this.$emit('onRefresh');
          	this.isRefresh = true;
          }else {
            this.marginHeight=-60;
          }
        },
        stopRefresh:function(){
        	this.marginHeight = -60;
          this.isRefresh = false;
        }
      }
  }
</script>
